<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统&nbsp;&nbsp;&nbsp;&nbsp;</title>
    <link type="text/css" rel="stylesheet" href="css/layout.css">
    <!--跑马灯-->
    <script type="text/javascript" >
        function title_run(){
            var content=document.title;
            var first_char=content.charAt(0);
            var sub = content.substring(1,content.length);
            document.title = sub + first_char;
        }
        setInterval('title_run()',1000);    //毫秒，多长时间间隔执行一次函数
    </script>
</head>
<body>
<div class="pg-header">
        <img src="images/manager.png" height="48">
        <div style="float: right;margin-top: 4px;margin-right: 10px;">
            <img src="images/user.png" height="40">
        </div>
</div>
<div class="pg-body">
    <div class="menu">
        <div class="title">目 录</div>
        <div class="item">
            <div class="parent">
                <a href="#summary">
                    <span style="display: inline-block;">概述</span>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="parent" >
                <a href="#chapter1">
                    <span style="display: inline-block">第一章 HTML</span>
                </a>
            </div>
            <div class="child">
                <a href="#chapter1.1">
                    <div>
                        <img style="float: left;" src="images/dash.png">
                        <span style="display: inline-block;float: left;">1.HTML基础</span>
                    </div>
                </a>
                <a href="#chapter1.2">
                    <div>
                        <img style="float: left;" src="images/dash.png">
                        <span style="display: inline-block;float: left;">2.HTML标记</span>
                    </div>
                </a>
                <a href="#chapter1.3">
                    <div>
                        <img style="float: left;" src="images/dash.png">
                        <span style="display: inline-block;float: left;">3.HTML表格</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="parent" >
                <a href="#chapter2">
                    <span style="display: inline-block">第二章 CSS</span>
                </a>
            </div>
            <div class="child">
                <a href="#chapter2.1">
                    <div>
                        <img style="float: left;" src="images/dash.png">
                        <span style="display: inline-block;float: left;">1.CSS基础</span>
                    </div>
                </a>
                <a href="#chapter2.2">
                    <div>
                        <img style="float: left;" src="images/dash.png">
                        <span style="display: inline-block;float: left;">2.CSS布局</span>
                    </div>
                </a>
                <a href="#chapter2.3">
                    <div>
                        <img style="float: left;" src="images/dash.png">
                        <span style="display: inline-block;float: left;">3.CSS特效</span>
                    </div>
                </a>
            </div>
        </div>
        <dl>
            <dt>目录</dt>
            <dd>
                <a href="#summary">概述</a>
            </dd>
            <dd>
                <a href="#chapter1">第一章 HTML</a>
                <ol>
                    <li>
                        <a href="#chapter1.1">HTML基础</a>
                    </li>
                    <li>
                        <a href="#chapter1.2">HTML标记</a>
                    </li>
                    <li>
                        <a href="#chapter1.3">HTML表格</a>
                    </li>
                </ol>
            </dd>
            <dd>
                <a href="#chapter2">第二章 CSS</a>
                <ol>
                    <li>
                        <a href="#chapter2.1">CSS基础</a>
                    </li>
                    <li>
                        <a href="#chapter2.2">CSS布局</a>
                    </li>
                </ol>
            </dd>
            <dd>
                <a href="#chapter3">JAVA SCRIPT</a>
                <ol>
                    <li>
                        <a href="#chapter3.1">脚本基础</a>
                    </li>
                    <li>
                        <a href="chapter3.2">制作网页特效</a>
                    </li>
                </ol>
            </dd>
        </dl>
    </div>
    <div class="content">
        <div class="tabbox">
            <div class="tabmenu">
                <span>简介</span>
                <ul id="tabmenutitle">
                    <li content-to="0" >概述</li>
                    <li content-to="1" >HTML</li>
                    <li content-to="2" >CSS</li>
                    <li content-to="3" >JAVA SCRIPT</li>
                </ul>
            </div>
            <div class="tabbody">
                <p content="0" >概述</p>
                <p content="1" CLASS="hide">HTML</p>
                <p content="2" class="hide">CSS</p>
                <p content="3" class="hide">JS</p>
            </div>
        </div>
        <div style="margin-left: 20px">
            <span style="font-size: 10px;">全文检索:</span>
            <input type="text" class="gray" id="search" value="请输入关键字" onfocus="enter()" onblur="leave()" />
            <input type="button" value="GO"/>
        </div>
        <h1 id="summary">概述</h1>
        <h1 id="chapter1">第一章 HTML</h1>
        <h2 id="chapter1.1">HTML基础</h2>
        &nbsp;&nbsp;&nbsp;&nbsp;HTML基础<br>&nbsp;&nbsp;&nbsp;&nbsp;……
        <h2 id="chapter1.2">HTML标记</h2>
        &nbsp;&nbsp;&nbsp;&nbsp;HTML标记<br>&nbsp;&nbsp;&nbsp;&nbsp;……
        <h2 id="chapter1.3">HTML表格</h2>
        &nbsp;&nbsp;&nbsp;&nbsp;HTML表格<br>&nbsp;&nbsp;&nbsp;&nbsp;……
        <h1 id="chapter2">第二章 CSS</h1>
        &nbsp;&nbsp;&nbsp;&nbsp;CSS基础<br>&nbsp;&nbsp;&nbsp;&nbsp;……
        <h1 id="chapter3">第三章 JS</h1>
        &nbsp;&nbsp;&nbsp;&nbsp;JS基础<br>&nbsp;&nbsp;&nbsp;&nbsp;……
        &nbsp;&nbsp;&nbsp;&nbsp;DOM编程<br>&nbsp;&nbsp;&nbsp;&nbsp;……
        &nbsp;&nbsp;&nbsp;&nbsp;jQuery<br>&nbsp;&nbsp;&nbsp;&nbsp;……
        <p>JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。</p>
        <p>jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。</p>
        <p>jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。</p>
    </div>
</div>
<div class="top" ><img src="images/gotop.png"></div>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">
    $(function(){
       $('.parent').click(function(){
           $(this).parent().siblings().children('.child').addClass('hide');
           $(this).next().removeClass('hide');
       })
    });  //收缩目录
    $(function(){
        $(".top").click(function(){
            $(window).scrollTop(0)
        })
    });  //回到顶部
    function enter(){
        $("#search").removeClass("gray");
        $("#search").addClass("red");
        var ele=document.getElementById('search');
        var val=$("#search").val();
        if(val.length=="请输入关键字"||val.trim()==''){
            ele.value="";
        }
    }    //选中搜索框
    function leave(){
        var ele=document.getElementById('search');
        var val=$("#search").val();
        if(val.length==0||val.trim()==''){
            ele.value="请输入关键字";
            $("#search").removeClass("red");
            $("#search").addClass("gray");
        }else{
            $("#search").removeClass("red");
            $("#search").addClass("gray");
        }
    }    //离开搜索框
    $(function(){
        $('#tabmenutitle').children().bind('click',function(){  //当点击列表中的项目，这个就是$(this)
            $menu=$(this);
            $content=$("#tabbody").find("p[content='" + $(this).attr("content-to") + "']");
            //找到id='tabbody'中P标签属性值为“content-to”的标签内容
            $menu.addClass('current').siblings().removeClass('current');
            $content.removeClass('hide').siblings().addClass('hide');
        })
    });
</script>
</body>
</html>